<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{margin: 0;padding: 0;list-style: none;}
	html,body{width: 100%;height: 100%;display: flex;background: gray;}
		.box{
			width: 60%;
			height: 60%;
			min-width: 300px;
			min-height: 300px;
			border:1px solid white;
			display: flex;
			margin:auto;
			
		}
		.box ul{
			width: 100%;
			height: 100%;
			
			display: flex;
			justify-content: space-around;/*留空白*/
			flex-wrap: wrap;/*间距*/

		}
		.box ul li{
			width: 21%;
			height:40%; 
			background: blue;
			display: flex;
			vertical-align: top;}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</div>
</body>
</html>